@import "@automattic/typography/styles/variables";

.share-site-modal__modal {
	max-width: 640px;

	.share-site-modal__modal-input-container {
		input {
			/* Required to tame the WordPress component's outrageously specific font size */
			font-size: $font-body !important;
		}
	}

	.share-site-modal__modal-social {
		flex-wrap: wrap;
		margin: 0;
		list-style: none;
	}

	.share-site-modal__modal-copy-link,
	.share-site-modal__modal-share-link {
		gap: 4px;
		display: inline-flex;
		align-items: center;
		font-weight: 500;
		padding: 4px 8px;
		font-size: $font-body-small;
		line-height: 20px;
		letter-spacing: -0.154px;
		color: #101517;
		.share-site-modal__modal-icon {
			border-radius: 100%;
			padding: 4px;
		}
	}

	.share-site-modal__modal-copy-link:disabled {
		opacity: 0.5;
	}

	.share-site-modal__modal-share-link:visited {
		color: #101517;
	}

	.share-site-modal__modal-share-link:hover:not(:disabled) {
		text-decoration: underline;
	}
}

.share-site-modal__popover {
	outline: none;
	z-index: 100000;
	.popover__inner {
		border: 0;
		box-shadow: none;
		border-radius: 2px;
		color: var(--color-text-inverted);
		background: var(--color-neutral-60);
		font-size: $font-body-extra-small;
		padding: 6px 10px;
		text-align: left;
	}

	.popover__arrow {
		display: none;
	}
}
